Buenas tardes a todos,
Tengo el siguiente código para obtener los datos de una API que preparé:
useEffect(() => { const fetchData = async () => { const result = await axios(BOOKS_API); setBookData(result.data); }; fetchData(); }, []);Así es como se ven los datos (llamada api sin procesar) ->
{ "bookName": "Thus Spoke Zarathustra", "bookGenre": "Philosophical", "pageCount": 327, "bookAuthorName": "Friedrich Nietzsche", "isbnNumber": "9780521602617" }, { "bookName": "Beyond good and evil", "bookGenre": "Philosophical", "pageCount": 301, "bookAuthorName": "Friedrich Nietzsche", "isbnNumber": "9780394703374" },Las funcionalidades de mi sitio web requieren una propiedad "id" adicional, un objeto "final" se vería así:
{ id: 1, bookName: 'Thus Spoke Zarathustra', bookGenre: 'Philosophical', pageCount: 327, bookAuthorName: 'Friedrich Nietzsche', isbnNumber: '9780521602617', },Mi pregunta es: ¿cómo puedo agregar estos datos obtenidos de mi API con un campo de "id", que siempre se enumerará de 1 a n? (n-número de filas recuperadas)
Gracias de antemano
Simplemente llame a .map en la respuesta y establezca el campo de identificación en el índice + 1:
let bookData = []; const setBookData = (data) => { bookData = data; } const apiResponse = [ { "bookName": "Thus Spoke Zarathustra", "bookGenre": "Philosophical", "pageCount": 327, "bookAuthorName": "Friedrich Nietzsche", "isbnNumber": "9780521602617" }, { "bookName": "Beyond good and evil", "bookGenre": "Philosophical", "pageCount": 301, "bookAuthorName": "Friedrich Nietzsche", "isbnNumber": "9780394703374" } ]; setBookData(apiResponse.map((el, index) => { return { ...el, "id": index+1 } })); console.log(bookData);useEffect(() => { const fetchData = async () => { const { data } = await axios(BOOKS_API); const formattedResult = data.map((res, index) => { return { ...res, id: index + 1 } }); setBookData(formattedResult); }; fetchData(); }, []);